<template>
    <div>
      <a-card title="评价统计">
          <table>
              <tr>
                  <th></th>
                  <th>最近一周</th>
                  <th>最近一个月</th>
                  <th>最近半年</th>
                  <th colspan='2' width="200px">累计评价</th>
              </tr>
              <tr>
                  <td>
                      <a-icon type="star" theme="twoTone" two-tone-color="red" style="font-size: 20px;"/>
                      <span style="margin-left: 5px">好评</span>
                  </td>
                  <td v-if="aggData.GOOD" v-for="goodComment in aggData.GOOD">{{goodComment}}</td>
                  <td v-if="!aggData.GOOD" v-for="i in 3">0</td>
                  <td rowspan="3">
                      <div id="myChart" :style="{width: '400px', height: '300px'}"></div>
                      <div style="font-size: 1.16em;color: #8c8c8c">
                          累计评价
                      </div>
                      <div style="font-size: 20px;color: black;font-weight: 600">
                          {{aggData.total}}
                      </div>
                  </td>
              </tr>
              <tr>
                  <td>
                      <a-icon type="star" theme="twoTone" two-tone-color="orange" style="font-size: 20px;"/>
                      <span style="margin-left: 5px">中评</span>

                  </td>
                  <td v-if="aggData.NOT_GOOD" v-for="mid in aggData.NOT_GOOD">{{mid}}</td>
                  <td v-if="!aggData.NOT_GOOD" v-for="i in 3">0</td>
              </tr>
              <tr>
                  <td>
                      <a-icon type="star" theme="twoTone" two-tone-color="gray" style="font-size: 20px;"/>
                      <span style="margin-left: 5px">差评</span>

                  </td>
                  <td v-if="aggData.BAD" v-for="bad in aggData.BAD">{{bad}}</td>
                  <td v-if="!aggData.BAD" v-for="i in 3">0</td>
              </tr>

          </table>
      </a-card>
    </div>
</template>

<script>
    import commentApi from "../../../api/goods/commentApi";

    export default {
        name: "CommentDataOverview",
        data() {
            return {
                aggData: {}
            }
        },
        created() {
            this.fetchAggData()
        },
        mounted() {
        },
        methods: {
            fetchAggData() {
                commentApi.commentAggCount().then(resp => {
                    if (resp.data.flag) {
                        this.aggData = resp.data.data
                        console.log(this.aggData)
                        this.initCharts();

                    }
                })
            },
            initCharts(){
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                let totalAgg=this.aggData.totalAgg;
                myChart.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '累计统计',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: totalAgg.GOOD?totalAgg.GOOD:0, name: '好评'},
                                {value: totalAgg.NOT_GOOD?totalAgg.NOT_GOOD:0, name: '中评'},
                                {value: totalAgg.BAD?totalAgg.BAD:0, name: '差评'},
                                {value: totalAgg.REPLY?totalAgg.REPLY:0, name: '讨论量'},
                            ]
                        }
                    ]
                });
            }
        }
    }
</script>

<style scoped>


    th {
        padding: 28px;
        text-align: center;
    }

    td {
        text-align: center;
        padding: 28px;
        font-size: 13px;
        color: black;
        font-weight: 400;

    }

    table {
        empty-cells: inherit;
    }

    table, th, td {
        border: 1px solid #F3F3F3;
    }
</style>